<template>
        <div>
                <div id="1111" style="position: absolute;width: 730px;height: 590px;border: 1px solid gray;overflow:hidden;">
                </div>
        </div>
</template>

<script>
    export default {
        name: "Map",
            data(){
                return{
                        address:undefined,
                        addressInfo:undefined,
                        avatar:undefined
                }
            },
            created() {
                this.init();
            },
            methods:{
                init(){
                        if (Boolean(sessionStorage.getItem("MapInfo"))) {
                                let data = JSON.parse(sessionStorage.getItem("MapInfo"));
                                this.address=data.address;
                                this.addressInfo=data.addressInfo;
                                this.avatar=data.avatar;
                        }
                }
            },
            mounted() {
            var map = new BMap.Map("1111");
            // map.centerAndZoom("宁波", 12);//这里是初始地图所显示的城市
            map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用e
            map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
            //禁止拖拽
            // map.disableDragging();

            map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
            map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
            map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，打开

            var localSearch = new BMap.LocalSearch(map);
            localSearch.enableAutoViewport(); //允许自动调节窗体大小
            map.clearOverlays();//清空原来的标注
            var keyword = this.address+this.addressInfo;
            var img=this.avatar
            localSearch.setSearchCompleteCallback(function (searchResult) {
                var poi = searchResult.getPoi(0);
                // document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;//这里是追加到对应的input文本框里，可以根据自己的需要来修改
                map.centerAndZoom(poi.point, 15);
                var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度
                map.addOverlay(marker);
                var content = "位置:" +keyword+ "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
                var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
                marker.addEventListener("click", function () { map.openInfoWindow(infoWindow,new BMap.Point(poi.point.lng, poi.point.lat)); });
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            });
            localSearch.search(keyword);
        },
    }
</script>

<style scoped>

</style>
